<template>
  <div class="mvlist_class">
    <div class="header">
      <div class="mvlist_title">
        <h4>全部分类</h4>
      </div>
      <div class="item_menu">
        <div class="title">语种:</div>
        <div class="menu">
          <div class="menu_list" :class="{ active: currentArea == item }" v-for="(item, index) in areas" :key="index" @click="handleAreaItme(index)">{{ item }}</div>
        </div>
      </div>
      <div class="item_menu">
        <div class="title">分类:</div>
        <div class="menu">
          <div class="menu_list" :class="{ active: currentType == item }" v-for="(item, index) in types" :key="index" @click="handleTypeItme(index)">{{ item }}</div>
        </div>
      </div>
      <div class="item_menu">
        <div class="title">排序:</div>
        <div class="menu">
          <div class="menu_list" :class="{ active: currentOrder == item }" v-for="(item, index) in orders" :key="index" @click="handleOrderItme(index)">{{ item }}</div>
        </div>
      </div>
    </div>
    <div class="content">
      <mvlist :mvList="allMvList"></mvlist>
    </div>
    <div class="footer">
      <el-pagination background :current-page.sync="offset" :page-count="50" @current-change="onPageChange" />
    </div>
  </div>
</template>

<script>
import Mvlist from '../../components/content/mv-list/mvlist.vue'
import { _getAllMv } from '../../network/mv'
export default {
  name: 'MvAllList',
  components: { Mvlist },
  data() {
    return {
      areas: ['全部', '内地', '港台', '欧美', '韩国', '日本'],
      types: ['全部', '官方版', '原声', '现场版', '网易出品'],
      orders: ['上升最快', '最热', '最新'],
      currentArea: '全部',
      currentType: '全部',
      currentOrder: '上升最快',
      limit: 30,
      offset: 1,
      allMvList: []
    }
  },
  created() {
    this.initData()
  },
  methods: {
    initData() {
      _getAllMv(this.currentArea, this.currentType, this.currentOrder, this.limit, this.offset).then((res) => {
        this.allMvList = res.data.data
        console.log(res)
      })
    },
    handleAreaItme(index) {
      this.currentArea = this.areas[index]
      this.initData()
    },
    handleTypeItme(index) {
      this.currentType = this.types[index]
      this.initData()
    },
    handleOrderItme(index) {
      this.currentOrder = this.orders[index]
      this.initData()
    },
    onPageChange(pangCont) {
      this.offset = pangCont
      this.initData()
    }
  }
}
</script>

<style lang="less" scoped>
.mvlist_class {
  width: 80%;
  margin: 0 auto;
  padding-top: 10px;
  .header {
    width: 100%;
    .mvlist_title {
      width: 100%;
      height: 40px;
      display: flex;
      align-items: center;
    }
    .item_menu {
      width: 100%;
      height: 50px;
      display: flex;
      .title {
        width: 10%;
        font-weight: 600;
        display: flex;
        justify-content: center;
        align-items: center;
      }
      .menu {
        width: 90%;
        display: flex;
        .menu_list {
          width: 100px;
          display: flex;
          justify-content: center;
          align-items: center;
          cursor: pointer;
        }
      }
    }
    .active {
      color: var(--primary);
    }
  }
  .footer {
    width: 100%;
    display: flex;
    justify-content: center;
    padding: 10px 0;
  }
}
</style>
